<template>
  <div class="breeds-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <h1>猫咪品种</h1>
        <p>探索各种猫咪品种的特点和习性</p>
      </div>
    </div>
    
    <!-- 搜索和筛选 -->
    <div class="breeds-filter">
      <input
        type="text"
        class="search-input"
        placeholder="搜索猫咪品种..."
        v-model="searchTerm"
      />
      <div class="filter-options">
        <select v-model="selectedSize" class="filter-select">
          <option value="">所有体型</option>
          <option value="small">小型</option>
          <option value="medium">中型</option>
          <option value="large">大型</option>
        </select>
        <select v-model="selectedTemperament" class="filter-select">
          <option value="">所有性格</option>
          <option value="friendly">友好</option>
          <option value="independent">独立</option>
          <option value="active">活泼</option>
          <option value="calm">安静</option>
        </select>
      </div>
    </div>
    
    <!-- 猫咪品种列表 -->
    <div class="breeds-list">
      <router-link 
        :to="`/breed/${breed.id}`"
        class="breed-item"
        v-for="breed in filteredBreeds"
        :key="breed.id"
      >
        <div class="breed-image">
          <img :src="breed.imageUrl" :alt="breed.name" />
        </div>
        <div class="breed-details">
          <h3>{{ breed.name }}</h3>
          <div class="breed-info">
            <span class="info-tag">{{ breed.origin }}</span>
            <span class="info-tag">{{ breed.size }}</span>
            <span class="info-tag">{{ breed.coat }}</span>
          </div>
          <p class="breed-description">{{ breed.description }}</p>
          <div class="breed-temperament">
            <strong>性格特点：</strong>
            <span v-for="trait in breed.temperament" :key="trait" class="trait-tag">{{ trait }}</span>
          </div>
          <div class="view-details">
            查看详情 →
          </div>
        </div>
      </router-link>
    </div>
    
    <!-- 加载更多按钮 -->
    <div class="load-more">
      <button class="load-button" @click="loadMoreBreeds" :disabled="isLoading">
        <span v-if="isLoading">加载中...</span>
        <span v-else>加载更多</span>
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// 搜索和筛选条件
const searchTerm = ref('')
const selectedSize = ref('')
const selectedTemperament = ref('')
const isLoading = ref(false)
const displayedBreeds = ref(6) // 初始显示的品种数量

// 猫咪品种数据（模拟数据）
const catBreeds = ref([
  {
    id: 1,
    name: '英国短毛猫',
    origin: '英国',
    size: '中型',
    coat: '短毛',
    description: '英国短毛猫是一种体型圆润、性格温顺的猫咪品种。它们拥有浓密的短毛和大而圆的眼睛，非常适合家庭饲养。',
    temperament: ['友好', '安静', '温顺', '独立'],
    imageUrl: 'https://picsum.photos/id/40/600/400'
  },
  {
    id: 2,
    name: '异国短毛猫',
    origin: '美国',
    size: '中型',
    coat: '短毛',
    description: '异国短毛猫结合了波斯猫的可爱外表和短毛猫的易于护理特性，性格友好，喜欢与人互动。',
    temperament: ['友好', '活泼', '粘人', '温顺'],
    imageUrl: 'https://picsum.photos/id/41/600/400'
  },
  {
    id: 3,
    name: '苏格兰折耳猫',
    origin: '苏格兰',
    size: '小型',
    coat: '短毛/长毛',
    description: '苏格兰折耳猫最显著的特征是向前折叠的耳朵，给人一种甜美可爱的印象。它们性格温和，喜欢安静的环境。',
    temperament: ['安静', '温顺', '友好', '独立'],
    imageUrl: 'https://picsum.photos/id/42/600/400'
  },
  {
    id: 4,
    name: '暹罗猫',
    origin: '泰国',
    size: '中型',
    coat: '短毛',
    description: '暹罗猫以其独特的重点色和蓝色眼睛而闻名。它们性格活泼好动，非常聪明，喜欢与人交流。',
    temperament: ['活泼', '聪明', '粘人', '好奇'],
    imageUrl: 'https://picsum.photos/id/43/600/400'
  },
  {
    id: 5,
    name: '布偶猫',
    origin: '美国',
    size: '大型',
    coat: '长毛',
    description: '布偶猫是一种大型、温顺的猫咪品种。它们拥有柔软的长毛和蓝色的眼睛，性格非常温和，被誉为"小狗猫"。',
    temperament: ['温顺', '友好', '粘人', '安静'],
    imageUrl: 'https://picsum.photos/id/44/600/400'
  },
  {
    id: 6,
    name: '俄罗斯蓝猫',
    origin: '俄罗斯',
    size: '中型',
    coat: '短毛',
    description: '俄罗斯蓝猫拥有独特的蓝灰色被毛和绿色眼睛。它们性格独立但友好，非常适合有耐心的主人。',
    temperament: ['独立', '安静', '友好', '聪明'],
    imageUrl: 'https://picsum.photos/id/45/600/400'
  },
  {
    id: 7,
    name: '孟买猫',
    origin: '美国',
    size: '中型',
    coat: '短毛',
    description: '孟买猫全身乌黑发亮，宛如一只小型黑豹。它们性格活泼、友好，喜欢与人互动。',
    temperament: ['活泼', '友好', '粘人', '聪明'],
    imageUrl: 'https://picsum.photos/id/46/600/400'
  },
  {
    id: 8,
    name: '橘猫',
    origin: '多种',
    size: '中型',
    coat: '短毛/长毛',
    description: '橘猫并不是一个特定的品种，而是指拥有橘色被毛的猫咪。它们通常性格开朗、亲人，是非常受欢迎的家猫。',
    temperament: ['友好', '开朗', '亲人', '活泼'],
    imageUrl: 'https://picsum.photos/id/47/600/400'
  }
])

// 过滤后的猫咪品种
const filteredBreeds = computed(() => {
  return catBreeds.value
    .filter(breed => {
      // 搜索词过滤
      const matchesSearch = breed.name.toLowerCase().includes(searchTerm.value.toLowerCase()) ||
                           breed.description.toLowerCase().includes(searchTerm.value.toLowerCase())
      
      // 体型过滤
      const matchesSize = !selectedSize.value || breed.size === selectedSize.value
      
      // 性格过滤
      const matchesTemperament = !selectedTemperament.value || 
                                 breed.temperament.includes(selectedTemperament.value)
      
      return matchesSearch && matchesSize && matchesTemperament
    })
    .slice(0, displayedBreeds.value)
})

// 加载更多猫咪品种
const loadMoreBreeds = () => {
  isLoading.value = true
  
  // 模拟加载延迟
  setTimeout(() => {
    displayedBreeds.value += 3
    isLoading.value = false
  }, 800)
}
</script>

<style scoped>
/* 全局样式变量 */
:root {
  --primary-color: #4CAF50;
  --primary-hover: #3d8b40;
  --text-primary: #333;
  --text-secondary: #666;
  --white: #ffffff;
  --light-gray: #f5f5f5;
  --border-color: #e0e0e0;
  --radius: 12px;
  --transition: all 0.3s ease;
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 页面容器 */
.breeds-container {
  min-height: 100vh;
  background-color: var(--light-gray);
}

/* 页面头部 */
.page-header {
  background-color: var(--primary-color);
  color: var(--white);
  padding: 40px 20px;
  text-align: center;
  margin-bottom: 30px;
}

.header-content h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.header-content p {
  font-size: 1.2rem;
  opacity: 0.9;
}

/* 搜索和筛选 */
.breeds-filter {
  max-width: 1200px;
  margin: 0 auto 30px;
  padding: 0 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}

.search-input {
  flex: 1;
  min-width: 300px;
  padding: 12px 20px;
  border: 2px solid var(--border-color);
  border-radius: var(--radius);
  font-size: 1rem;
  transition: var(--transition);
}

.search-input:focus {
  outline: none;
  border-color: var(--primary-color);
}

.filter-options {
  display: flex;
  gap: 15px;
}

.filter-select {
  padding: 12px 20px;
  border: 2px solid var(--border-color);
  border-radius: var(--radius);
  font-size: 1rem;
  background-color: var(--white);
  cursor: pointer;
  transition: var(--transition);
}

.filter-select:focus {
  outline: none;
  border-color: var(--primary-color);
}

/* 猫咪品种列表 */
.breeds-list {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
}

.breed-item {
  background-color: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.breed-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.breed-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.breed-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.breed-item:hover .breed-image img {
  transform: scale(1.05);
}

.breed-details {
  padding: 20px;
}

.breed-details h3 {
  font-size: 1.5rem;
  margin-bottom: 10px;
  color: var(--primary-color);
}

.breed-info {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.info-tag {
  background-color: var(--light-gray);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.breed-description {
  color: var(--text-secondary);
  margin-bottom: 15px;
  line-height: 1.6;
}

.breed-temperament {
  margin-top: 15px;
}

.trait-tag {
  display: inline-block;
  background-color: #e8f5e9;
  color: var(--primary-color);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.875rem;
  margin-right: 8px;
  margin-bottom: 8px;
}

/* 加载更多按钮 */
.load-more {
  text-align: center;
  margin: 40px 0;
}

.load-button {
  padding: 12px 30px;
  background-color: var(--primary-color);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.load-button:hover:not(:disabled) {
  background-color: var(--primary-hover);
  transform: translateY(-2px);
}

.load-button:disabled {
  background-color: var(--border-color);
  cursor: not-allowed;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-header {
    padding: 30px 20px;
  }
  
  .header-content h1 {
    font-size: 2rem;
  }
  
  .header-content p {
    font-size: 1rem;
  }
  
  .breeds-filter {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-input {
    min-width: auto;
  }
  
  .filter-options {
    flex-direction: column;
  }
  
  .breeds-list {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 480px) {
  .page-header {
    padding: 20px 15px;
  }
  
  .header-content h1 {
    font-size: 1.8rem;
  }
  
  .breed-details {
    padding: 15px;
  }
  
  .breed-details h3 {
    font-size: 1.3rem;
  }
}

/* 查看详情按钮样式 */
.view-details {
  margin-top: 15px;
  text-align: right;
  font-weight: 600;
  color: var(--primary-color);
  font-size: 0.9rem;
  transition: var(--transition);
}

.view-details:hover {
  color: var(--primary-hover);
  transform: translateX(5px);
}
</style>